<template>
	<view class="container">
		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
			back-icon-color="#fff" back-icon-size="35" title="现货金字塔" :background="{ background: '#101334' }"
			title-color="#fff">
			<image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
		</u-navbar>
		<view class="tab">
			<u-tabs :list="tabs" :is-scroll="false" :current="current" bg-color="#101334" active-color="#fff"
				inactive-color="aliceblue" height="100" @change="change"></u-tabs>
		</view>
		<swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
			<swiper-item class="swiper-item" v-for="(pitem, pindex) in tabs" :key="pindex">
				<scroll-view scroll-y style="width: 100%; height: 100%" :refresher-triggered="pitem.triggered">
					<robot-contract v-if="current == 0"></robot-contract>
					<manual-spot-ai v-if="current == 1"></manual-spot-ai>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import robotContract from '@/components/quant/robot-contract.vue'
	import manualSpotAi from '@/components/quant/manual-spot-ai.vue'
	export default {
		components: {
			robotContract,
			manualSpotAi
		},
		data() {
			return {
				index: 0,
				swiperHeight: 0,
				tabs: [{
						name: "AI策略",
						triggered: false,
						_triggered: false,
					},
					{
						name: "手动设置",
						triggered: false,
						_triggered: false,
					},
				],
				current: 0,
			};
		},
		onLoad() {},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e);
					let {
						windowWidth,
						windowHeight,
						safeArea
					} = e;
					const query = uni.createSelectorQuery().in(that);
					query
						.select("#swiperBox")
						.boundingClientRect((data) => {
							that.swiperHeight = safeArea.bottom - data.top;
						})
						.exec();
				},
			});
		},
		methods: {

			change(index) {
				this.current = index;
			},
			tabsChange(e) {
				this.current = e.detail.current;
				console.log('current', this.current)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #101334;
	}

	.tab {
		margin: 0 0 10rpx;
		border-bottom: 1px solid #e4e7ed;
	}
</style>
